<script setup>
defineProps({
  categoryList: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <div class="sub-list">
    <h3>全部分类</h3>
    <ul>
      <li v-for="i in categoryList" :key="i.id">
        <RouterLink :to="`/brand/${i.id}`">
          <img :src="i.picture" />
          <p>{{ i.name }}</p>
        </RouterLink>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
h3 {
  font-size: 28px;
  color: #666;
  font-weight: normal;
  text-align: center;
  line-height: 100px;
}
.sub-list {
  border-radius: 10px 10px 0 0;

  ul {
    display: flex;
    padding: 0 32px;
    justify-content: space-around;

    li {
      width: 168px;
      height: 160px;

      a {
        text-align: center;
        display: block;
        font-size: 16px;

        img {
          width: 100px;
          height: 100px;
          border-radius: 10px;

          object-fit: cover;
        }

        p {
          line-height: 40px;
        }

        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
</style>
